<template>
 <TopNavComponent/>
  <div class="content">
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div class="person" v-for="item in list" :key="item.id" @click="onPersonDetail(item.id)">
        <img :src="item.image" alt="">
        <div class="person-item">
          <p>{{item.name}}</p>
          <span class="age">工作经验{{item.age}}年</span>
          <span class="price">{{item.price}}/月</span>
          <span class="descs">{{item.descs}}</span>
        </div>
      </div>
    </van-list>
  </div>
</template>
<script setup lang="ts">
import {getPersonList} from "@/api/Person/person.ts"
import TopNavComponent from "@/components/TopNavComponent.vue";
import {ref} from "vue";
import {useRouter} from "vue-router";
interface IList {
  id:number,
  image:string,
  name:string,
  age:string,
  price:string,
  descs:string,
  sex:string,
  birthday:string,
  education:string,
}
const loading=ref<boolean>(false)
const finished=ref<boolean>(false)
const list=ref<IList[]>([])
const page=ref<number>(1)
const router=useRouter()
const onLoad= async ()=>{
  const res = await getPersonList({page:page.value})
  if(res.status==200) {
    page.value++
    list.value = list.value.concat(res.data)
  }
  loading.value=false
  if(res.status==500){
    finished.value=true
  }
}
const onPersonDetail=(id:number)=>{
  router.push({name:'personDetails',params:{id}})
}
</script>
<style scoped lang="less">
.content{
  padding: 10px;
  background-color: #fff;
  box-sizing: border-box;
  .person{
    display: flex;
    padding: 10px 0;
    img{
      width: 100px;
      border-radius: 5px;
    }
    .person-item{
      padding: 10px;
      box-sizing: border-box;
      p{
        font-size: 15px;
        font-weight: 700;
        margin: 5px 0;
      }
      .age{
        display: block;
        font-size: 14px;
        color: #999;
        margin-bottom: 15px;
      }
      .price{
        display:block;
        font-size: 14px;
        color: #ff4444;
        margin-bottom: 10px;
      }
      .descs{
        font-size: 14px;
        color: #999;
      }
    }
  }
}
</style>